<template>
    <div class="animate__animated animate__fadeIn">
        <div class="indexs">
            <div class="page-display">
                <router-link to="/" @click="test"> <img src="../assets/图层.png" class="logo" /></router-link>
                <!-- 天气查询 -->
                <el-row class="weather">
                    <el-form ref="formRef" :model="weather">
                        <el-col :span="20">
                            <el-form-item prop="weather_city" :rules="[{
                                required: true,
                                message: '查询城市不能为空',
                                trigger: 'blur',
                            }]">
                                <el-input v-model="weather.weather_city" size="large" placeholder="查询城市天气预报" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button class="index_btn" type="primary" @click="weather_select(formRef)"
                                    :icon="Search">
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <!-- 实时天气显示 -->
                <Local_weatherVue/>
                <!-- 登录注册 -->
                    <div v-if="userinfo_name == null" class="log-and-ret">
                        <span>
                            <router-link class="log_link" to="/LoginRegistration?second=first">登录</router-link>
                            <router-link class="ret_link" to="/LoginRegistration?second=second">注册</router-link>
                            <router-link class="ret_link" to="/index/userinfo/myorders">
                                <order theme="outline" size="18" fill="#000000" />
                                我的订单
                            </router-link>
                            <router-link class="ret_link" to="/homes/datas_tabs">
                                <home theme="outline" size="18" fill="#000000" />
                                首页
                            </router-link>
                        </span>
                    </div>
                    <!-- 用户名 -->
                    <div v-if="userinfo_name != null" class="cancellation">
                        <el-row>
                            <span class="bor">
                                <el-dropdown>
                                    <span class="fs-20">
                                        <me theme="outline" size="18" fill="#000000" />
                                        欢迎用户：{{ userinfo_name.username }}<el-icon class="el-icon--right">
                                            <arrow-down />
                                        </el-icon>
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item>
                                                <el-button
                                                    style="border: none;background-color: #dff1fd;font-size: 16px;margin-top:-px;">
                                                    <router-link to="/index/userinfo/basicInformation">个人信息
                                                    </router-link>
                                                </el-button>
                                            </el-dropdown-item>
                                            <el-dropdown-item>
                                                <el-popconfirm confirm-button-text="确认" cancel-button-text="我再看看"
                                                    :icon="InfoFilled" icon-color="#626AEF" title="你要退出航班系统吗?"
                                                    @confirm="cancellation" @cancel="cancelEvent">
                                                    <template #reference>
                                                        <el-button
                                                            style="border: none;background-color: #dff1fd;font-size: 16px;margin-top:-px;">
                                                            退出登录
                                                        </el-button>
                                                    </template>

                                                </el-popconfirm>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </span>
                            <div style="border-radius: 10px; margin-left: 10px;">
                                <div style="margin-top: 7px;"></div>
                                <router-link class="ret_link" to="/index/userinfo/myorders">
                                    <order theme="outline" size="18" fill="#000000" />
                                    我的订单
                                </router-link>
                                <router-link class="ret_link" to="/homes/datas_tabs">
                                    <home theme="outline" size="18" fill="#000000" />
                                    首页
                                </router-link>
                            </div>
                        </el-row>
                    </div>
                    <div class="index_menu">
                    </div>
                    <div class="datas_maximum">
                        <router-view></router-view>
                    </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { Order, Me, Home, Search } from "@icon-park/vue-next"
import { left } from '@popperjs/core';
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from "vue-router";
import { useStore } from '../store/store';
import { ElMessage } from "element-plus";
import Local_weatherVue from '../views/weather/Local_weather.vue';

onMounted(()=>{
    sessionStorage.setItem("Byorder",2)
})
let test=function(){
    sessionStorage.setItem("Byorder",2)
}
const weather = reactive({
    weather_city:''
})
const store = useStore();
const name = store.name;
const router = useRouter();
const route = useRoute();
const userinfo_name = JSON.parse(sessionStorage.getItem("username"));
const user_id = parseInt(sessionStorage.getItem("id"))
const index_router = ref(router.currentRoute._value.fullPath)
const cancellation = () => {
    location.reload()
    sessionStorage.removeItem("id");
    sessionStorage.removeItem("username");
}
// 表单验证
const formRef = ref()
// 天气预报
const weather_select = (formRef) => {
    if (!formRef) return
    formRef.validate((valid) => {
        if (valid) {
            router.push({
                path: "/index/weather",
                query: { weather_city: weather.weather_city }
            })
        } else {
            ElMessage.warning("请调整数据再请搜索")
            return false
        }
    })
}
</script>

<style scoped>

a {
    text-decoration: none;
}
.indexs {
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgb(255, 255, 255), rgb(223, 241, 253)) no-repeat;
    background-size: 100% 100%;
    /* position: absolute; */
    min-width: 1680px;
    min-height: 900px;
}

.page-display {
    width: 1600px;
    height: 900px;
    margin: auto;
    transform: translate(0%, 6%);
}

.index_menu {
    width: 25%;
    height: 70px;
    margin: auto;
}

.el-menu--horizontal {
    /* display: flex; */
    flex-wrap: nowrap;
    border-bottom: solid 0px #000;
    border-right: none;
}

.el-menu {
    --el-menu-active-color: var(--el-color-primary);
    --el-menu-text-color: var(--el-text-color-primary);
    --el-menu-hover-text-color: var(--el-text-color-primary);
    --el-menu-bg-color: var(--el-fill-color-blank);
    --el-menu-hover-bg-color: var(--el-color-primary-light-9);
    --el-menu-item-height: 56px;
    --el-menu-item-font-size: 21px;
    --el-menu-item-hover-fill: var(--el-color-primary-light-9);
    --el-menu-border-color: var(--el-border-color);
    border-right: solid 0px var(--el-menu-border-color);
    list-style: none;
    position: relative;
    margin: 0px 0px;
    padding-left: 0;
    transform: translate(10%, 0%);
    background-color: rgb(225, 242, 253);
    box-sizing: border-box;
    font-family: "Microsoft YaHei";
}

.datas_maximum {
    width: 96%;
    height: 90%;
    transform: translate(2%, 0%);
}

/* 登录注册 */
.log-and-ret {
    top: 8px;
    height: 45px;
    position: absolute;
    right: 155px;
    padding: 5px;
}

.log_link {
    font-size: 18px;
}

.ret_link {
    padding: 6px;
    font-size: 18px;
}

.el-link {
    font-size: 18px;
}
/* 欢迎用户 */
.cancellation {
    top: -1px;
    height: 45px;
    position: absolute;
    right: 155px;
    padding: 5px;
}

.logo {
    position: absolute;
    width: 150px;
    left: 120px;
    top: -30px;
}
.weather{
    position: absolute;
    width: 320px;
    height: 40px;
    top: 5px;
    left: 400px;
}
:deep(.weather .el-input__wrapper) {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 13px;
    border-top-right-radius: 0px;
}
:deep(.weather .el-input){
    --el-input-hover-border-color: #79bbff;
    --el-input-border-color: #409eff;
}
:deep(.weather .el-button--small){
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 13px;
    border-top-left-radius: 0px;
}
.index_btn{
    margin-top: 0px;
    font-size: 20px;
    height: 40px;
    width: 55px;
}
.bor {
    /* background-color: #ffffff; */
    border-radius: 10px;
    padding: 10px;
}
.fs-20{
    font-size: 18px;
}
</style>